<template>
  <div>
      <!-- 轮播图 -->
   <swiper :imgList="imgList" :isfull="true"></swiper>
    <!-- 九宫格 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li v-for="item in iconList" :key="item.id" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link :to="item.url">
                <img :src="item.src" />
                <div class="mui-media-body">{{item.title}}</div>
            </router-link>
        </li>
    </ul> 
  </div>
</template>

<script>
import swiper from '../subcomponents/swiper.vue'
import { Toast } from 'mint-ui'
import img1 from '../../images/case_01.jpg'
import img2 from '../../images/case_02.jpg'
import img3 from '../../images/case_03.jpg'
import icon1 from '../../images/1.png'
import icon2 from '../../images/2.png'
import icon3 from '../../images/3.png'
import icon4 from '../../images/4.png'
import icon5 from '../../images/5.png'
import icon6 from '../../images/6.png'

export default {
    data(){
        return {
            imgList:[
                {id:1,url:img1},
                {id:2,url:img2},
                {id:3,url:img3}
            ],
            iconList:[
                {id:1,src:icon1,title:"新闻资讯",url:"/home/newlist"},
                {id:2,src:icon2,title:"图片分享",url:"/home/photoslist"},
                {id:3,src:icon3,title:"商品购买",url:"/home/goodslist"},
                {id:4,src:icon4,title:"留言反馈",url:"#"},
                {id:5,src:icon5,title:"视频专区",url:"#"},
                {id:6,src:icon6,title:"联系我们",url:"#"}
            ]
        };
    },
    created(){
        // this. getLunbotu();
    },
    methods:{

        // getLunbotu(){
        //     //vue-resource get请求获取轮播图 链接失效
        //     this.$http.get("http://vue.studyit.io/api/getlunbo").then(result=>{
        //         // console.log(result.body);
        //         if(result.body.status===0){
        //             this.imgList=result.body.message;
        //         }else{
        //             //失败
        //             Toast("加载失败");
        //         }

        //     })
        // }
    },
    components:{
        swiper
    }
};
</script>

<style lang="scss" scoped>

.mui-grid-view.mui-grid-9{
    border:none;
    background-color:white;
    img{
        width:60px;
        height:60px;
    }
    .mui-media-body{
        font-size:13px;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none;
}
</style>